/*
  * @Author: wzh 
  * @Date: 2021-07-12 16:09:09
  * @Last Modified by: 1521620993@qq.com
  * @Last Modified time: 2021-07-12 16:09:09
  */
@charset "UTF-8";
:root {
  --mainColor: #e3ebf6;
  --mainColor1: #edf0f3;
  --mainColor2: #f3f0f3;
  --white: #FFFFFF99;
  --greyDark: #9baacf;
  --greyDark2: #ccd1dd;
  --greyDark3: #c9d1e6;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  height: 100vh;
  background-color: var(--mainColor);
  display: flex;
  justify-content: center;
  align-items: center;
}
body .container {
  width: 30rem;
  height: 16rem;
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0.1rem 0.1rem 0.2rem var(--greyDark), 0.2rem 0.2rem 0.2rem var(--greyDark2), 0.3rem 0.3rem 0.2rem var(--greyDark3), -0.1rem -0.1rem 0.1rem var(--mainColor1), -0.2rem -0.2rem 0.1rem var(--mainColor2), -0.3rem -0.3rem 0.6rem var(--white);
  display: flex;
}
body .loudspeaker {
  flex: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 喇叭外侧开始 */
}
body .loudspeaker .outer {
  width: 13rem;
  height: 13rem;
  box-shadow: 0.1rem 0.1rem 0.2rem var(--greyDark), 0.2rem 0.2rem 0.2rem var(--greyDark2), 0.3rem 0.3rem 0.2rem var(--greyDark3), -0.3rem -0.3rem 0.6rem var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 小圆点 */
  /* 喇叭外侧结束 */
}
body .loudspeaker .outer .inner {
  border-radius: 50%;
  width: 11rem;
  height: 11rem;
  background-image: radial-gradient(#848793 20%, transparent 40%);
  background-size: 0.5625rem 0.5625rem;
  transform: rotate(45deg);
  /* 内侧阴影 */
}
body .loudspeaker .outer .inner::before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 11.125rem;
  height: 11.125rem;
  box-shadow: inset 0.625rem 0.625rem 1.25rem #00000026, inset 0.25rem 0.25rem 0.125rem #ffffff99;
}
body .controls {
  flex: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
body .controls .minus,
body .controls .plus,
body .controls .microphone,
body .controls .power {
  width: 6.5rem;
  text-align: center;
}
body .controls .minus .fas,
body .controls .plus .fas,
body .controls .microphone .fas,
body .controls .power .fas {
  font-size: 2.925rem;
  color: var(--mainColor);
  text-shadow: 0.1rem 0.1rem 0.1rem var(--greyDark), 0.2rem 0.2rem 0.1rem var(--greyDark2), 0.3rem 0.3rem 0.1rem var(--greyDark3), -0.1rem -0.1rem 0.1rem var(--white);
}
